<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxDiv提交</title>
    <#include "/include/common.ftl">
    <script type="text/javascript" src="/assets/js/util.js"></script>
    <script language="javascript" type="text/javascript" src="/assets/lib/My97DatePicker/WdatePicker.js"></script>
</head>
<body>
<div class="row">
    <div class="col-md-5">
        <div class="panel panel-default">
            <div class="panel-heading">查找Div内元素,utilJs生成json</div>
            <div class="panel-body" id="basicInfo">
                <div class="form-group">
                    <label class="col-sm-2 control-label">用户名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" value="石头" name="consignee">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">地区</label>
                    <div class="col-sm-10">
                        <select name="areaId" class="form-control">
                            <option value="2">杭州</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">地址</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="address" class="modify_3" value="中策西门">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">手机</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" value="石头" value="13735842689" name="phone">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">生日</label>
                    <div class="col-sm-10">
                        <input name="now" id="now" class="form-control" type="text"
                               onClick="WdatePicker({el:this,dateFmt:'yyyy-MM-dd HH:mm:ss'})" style="height: 28px">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">购物车项1</label>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" value="3698" name="cartItemDtoList[0].productId">
                    </div>
                    <div class="col-sm-5">
                        <input type="text" class="form-control" value="3486" name="cartItemDtoList[0].cartItemId">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">购物车项2</label>
                    <div class="col-sm-5">
                        <input name="cartItemDtoList[1].productId" class="form-control" type="text" value="2931"/>
                    </div>
                    <div class="col-sm-5">
                        <input name="cartItemDtoList[1].cartItemId" class="form-control" type="text" value="265"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="button" class="btn btn-default" id="btnJson" value="生成json提交"
                               onclick="ajaxPostJson()"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    后台返回的数据：
    <div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
    function ajaxPostJson() {

        var aa = Util.f2j($("#basicInfo"));
        //json对象转json字符串
        console.log(JSON.stringify(aa));
        $.ajax({
            type: "POST",
            url: "/mvc/ajaxPostJson.htm",
            contentType: "application/json",//以json字符串发送到服务器
            data: JSON.stringify(aa),//json对象转json字符串
            dataType: "json",
            success: function (msg) {
                $("#result").text(JSON.stringify(msg));
            }
        });
    }
</script>